<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应聘系统</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100%;
        }
        #sidebar {
            width: 250px;
            height: 100vh;
            background-color: #4A4A4A;
            color: white;
            position: fixed;
            left: -250px;
            transition: left 0.3s;
            overflow: auto;
        }
        #sidebar.active {
            left: 0;
        }

        #sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #sidebar ul li a {
            display: block;
            padding: 80px;
            color: white;
            text-decoration: none;
            border-bottom: 1px solid #5A5A5A;
        }

        #sidebar ul li a:hover {
            background-color: #5A5A5A;
        }

        #content {
            margin-left: 0;
            transition: margin-left 0.3s;
            padding: 20px;
        }

        #content.with-sidebar {
            margin-left: 250px;
        }

        #hamburger {
            position: fixed;
            bottom: 10px;
            left: 10px;
            z-index: 1000;
            font-size: 24px;
            background: #4A4A4A;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
        }


        h1 {
            font-size: 3em;
            color: #005792;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin: 0;
            padding: 20px;
            background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 2s infinite;
        }
    </style>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            height: 100%;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
            color: #333;
            overflow-x: hidden;
        }

        /* 背景动画效果 */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 20%),
                    radial-gradient(circle at 90% 80%, rgba(165, 202, 255, 0.2) 0%, transparent 20%);
            z-index: -1;
            animation: backgroundAnim 15s ease infinite;
        }

        @keyframes backgroundAnim {
            0% { transform: translate(0, 0); }
            25% { transform: translate(-5px, -5px); }
            50% { transform: translate(0, 0); }
            75% { transform: translate(5px, 5px); }
            100% { transform: translate(0, 0); }
        }

        /* 侧边栏样式 */
        #sidebar {
            width: 260px;
            height: 100vh;
            background: linear-gradient(to bottom, #2c3e50, #1a2530);
            color: white;
            position: fixed;
            left: -260px;
            transition: left 0.3s ease-in-out;
            overflow: auto;
            box-shadow: 3px 0 15px rgba(0, 0, 0, 0.2);
            z-index: 999;
        }

        #sidebar.active {
            left: 0;
        }

        #sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #sidebar ul li a {
            display: flex;
            align-items: center;
            padding: 18px 25px;
            color: #e0e0e0;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s;
            font-size: 16px;
        }

        #sidebar ul li a i {
            margin-right: 15px;
            font-size: 18px;
        }

        #sidebar ul li a:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            padding-left: 30px;
        }

        /* 内容区域 */
        #content {
            margin-left: 0;
            transition: margin-left 0.3s ease-in-out;
            padding: 20px;
            min-height: 100vh;
        }

        #content.with-sidebar {
            margin-left: 260px;
        }

        /* 汉堡菜单按钮 */
        #hamburger {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
            font-size: 24px;
            background: linear-gradient(135deg, #2c3e50, #1a2530);
            color: white;
            border: none;
            padding: 15px;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #hamburger:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }


        .main-header h1 {
            font-size: 2.8rem;
            color: #2c3e50;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
            margin: 0;
            position: relative;
            display: inline-block;
        }

        .main-header h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, #3498db, #2c3e50);
            border-radius: 2px;
        }


        /* 退出按钮 */
        #logoutButton {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 25px;
            z-index: 1000;
            display: flex;
            align-items: center;
        }
    </style>
    <!--双向系统-->
    <style>
        .employment-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .employment-table th, .employment-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .employment-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .employment-table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .employment-table tbody tr:hover {
            background-color: #f1f1f1;
        }
    </style>
    <script src=js/jquery.min.js></script>
    <script src=js/echarts.js></script>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="top-nav">
    <div class="logo">
        <i class="fas fa-briefcase"></i>
        <h1>中南财经政法大学就业管理系统</h1>
    </div>

    <div class="user-controls">
        <button id="hamburger" class="btn btn-secondary">
            <i class="fas fa-bars"></i> 菜单
        </button>
        <button id="logoutButton" class="btn btn-danger">
            <i class="fas fa-sign-out-alt"></i> 退出
        </button>
    </div>
</div>
<div id="sidebar">
    <ul>
        <li><a href="#" onclick="Employer()">招聘发送与接受</a></li>
    </ul>
</div>
<div id="content">
    <h1 id="title" style="display: block;">🌟 欢迎来到您的就业管理主页 🌟</h1>
    <!-- 邀请与发送 -->
    <div id="Employer" style="display: none;">
        <!-- 发送请求表单 -->
        <div id="SendRequestForm" style="margin-bottom: 20px;">
            <label for="employeeName">雇员名称：</label>
            <input type="text" id="employeeName" name="employeeName" placeholder="请输入想要招聘的用户名称">
            <button onclick="sendApplication()">发送申请</button>
        </div>
        <!-- 表格容器 -->
        <div id="TableContainer" style="display: flex; flex-direction: column; height: 100%;">
            <!-- 员工信息表格 -->
            <h1>应聘信息申请</h1>
            <div id="EmployeeInfo" style="flex: 64;">
                <table id="Employments1" class="employment-table">
                    <thead>
                    <tr>
                        <th>雇员名称</th>
                        <th>发送时间</th>
                        <th>申请到期时间</th>
                        <th>申请状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 动态加载的数据将插入到这里 -->
                    </tbody>
                </table>
            </div>
            <!-- 雇主信息表格 -->
            <h1>招聘信息申请</h1>
            <div id="EmployerInfo" style="flex: 36;">
                <table id="Employments2" class="employment-table">
                    <thead>
                    <tr>
                        <th>雇员名称</th>
                        <th>发送时间</th>
                        <th>邀请到期时间</th>
                        <th>邀请状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 动态加载的数据将插入到这里 -->
                    </tbody>
                </table>
            </div>
            <!-- 招聘记录表格 -->
            <h1>招聘信息记录</h1>
            <div id="Employments" style="flex: 36;">
                <table id="Employments3" class="employment-table">
                    <thead>
                    <tr>
                        <th>雇员名称</th>
                        <th>邀请状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 动态加载的数据将插入到这里 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('hamburger').addEventListener('click', function () {
        var sidebar = document.getElementById('sidebar');
        var content = document.getElementById('content');
        var isOpen = sidebar.classList.contains('active');
        if (isOpen) {
            sidebar.classList.remove('active');
            content.classList.remove('with-sidebar');
        } else {
            sidebar.classList.add('active');
            content.classList.add('with-sidebar');
        }
    });
    var EmployeeContainer = document.getElementById('Employer')
    var title = document.getElementById('title');
    function Employer() {
        EmployeeContainer.style.display ='block';
        title.style.display = 'none';
        // 调用函数，加载申请记录
        fetchApplications();
        fetchInvitations();
        fetchRecords()
    }
</script>
<script>
    // 状态映射
    const stateMap = {
        0: '雇主未同意',
        1: '雇员未同意',
        2: '双方已同意'
    };
    function sendApplication() {
        const userInfo = {
            employeeName: document.getElementById('employeeName').value,
        };
        fetch('/zuel/employment/add1', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(userInfo),
        })
            .then(response => response.json())
            .then(data => {
                if (data.code===200) {
                    alert('申请发送成功！');
                    fetchApplications()
                    fetchRecords()
                } else {
                    alert('申请发送失败：' + data.message);
                }
            })
            .catch(error => {
                alert('申请发送失败：' + error.message);
            });

    }
    // 函数：获取当前申请记录
    function fetchApplications() {
        // 获取tbody元素
        const tbody = document.querySelector('#Employments1 tbody');
        // 清空现有记录
        tbody.innerHTML = '';

        // 发送GET请求到后端获取申请记录
        fetch('/zuel/employment/list11', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then(response => response.json())
            .then(data => {
                // 遍历返回的数据，动态创建表格行
                data.records.forEach(employment => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                    <td>${employment.employeeName}</td>
                    <td>${employment.createTime}</td>
                    <td>${getExpiryTime(employment.createTime)}</td>
                    <td>${stateMap[employment.state] || '未知状态'}</td>
                `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('Error fetching applications:', error);
            });
    }
    function fetchInvitations() {
        // 获取tbody元素
        const tbody = document.querySelector('#Employments2 tbody');
        // 清空现有记录
        tbody.innerHTML = '';

        // 发送GET请求到后端获取邀请记录
        fetch('/zuel/employment/list21', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then(response => response.json())
            .then(data => {
                // 遍历返回的数据，动态创建表格行
                data.records.forEach(employment => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                <td>${employment.employeeName}</td>
                <td>${employment.createTime}</td>
                <td>${getExpiryTime(employment.createTime)}</td>
                <td>${stateMap[employment.state] || '未知状态'}</td>
                <td><button class="agree-btn" data-id="${employment.id}" data-state="${employment.state}">同意</button></td>
            `;
                    tbody.appendChild(row);
                });

                // 为tbody添加事件委托
                tbody.addEventListener('click', (event) => {
                    if (event.target.classList.contains('agree-btn')) {
                        agreeInvitation(event.target.dataset.id, event.target.dataset.state);
                    }
                });
            })
            .catch(error => {
                console.error('Error fetching invitations:', error);
            });
    }
    function agreeInvitation(invitationId, state) {
        const userInfo = {
            id: parseInt(invitationId, 10),
            state: parseInt(state, 10)
        };
        fetch(`/zuel/employment/agree`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(userInfo),
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('邀请已同意！');
                    fetchInvitations(); // 刷新邀请列表
                } else {
                    alert('同意邀请失败：' + data.message);
                }
            })
            .catch(error => {
                alert('同意邀请失败：' + error.message);
            });
        fetchRecords()
    }

    function fetchRecords() {
        // 获取tbody元素
        const tbody = document.querySelector('#Employments3 tbody');
        // 清空现有记录
        tbody.innerHTML = '';

        // 发送GET请求到后端获取申请记录
        fetch('/zuel/employment/list31', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then(response => response.json())
            .then(data => {
                // 遍历返回的数据，动态创建表格行
                data.records.forEach(employment => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                    <td>${employment.employeeName}</td>
                    <td>${stateMap[employment.state] || '未知状态'}</td>
                `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('Error fetching applications:', error);
            });
    }
    // 函数：计算申请到期时间
    function getExpiryTime(createTime) {
        // 解析createTime为Date对象
        const createTimeDate = new Date(createTime);

        // 计算一周后的时间
        const expiryTime = new Date(createTimeDate.getTime() + 7 * 24 * 60 * 60 * 1000);

        // 格式化日期为 YYYY-MM-DD HH:MM:SS
        const pad = (number) => number.toString().padStart(2, '0');
        const year = expiryTime.getFullYear();
        const month = pad(expiryTime.getMonth() + 1); // 月份从0开始，需要加1
        const day = pad(expiryTime.getDate());
        const hours = pad(expiryTime.getHours());
        const minutes = pad(expiryTime.getMinutes());
        const seconds = pad(expiryTime.getSeconds());

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
</script>
</body>
</html>